
<template>
  <div>
    <!-- <Button type="primary" @click="modal1 = true">Display dialog box</Button> -->
    <Modal
      v-model="mode"
      width="50%"
      title="新增信息"
      @change="testChange"
      @on-cancel="cancel"
    >
      <Row>
        <Form
          ref="UserData"
          :model="UserData"
          :rules="ruleInUser"
          :label-width="100"
        >
          <div style="width: 100%; height: auto; margin: 0 auto">
            <Row>
              <i-col span="12">
                <FormItem label="红枣种类：" prop="ReddatesType">
                  <label slot="label">红枣种类：</label>
                  <Input
                    v-model="UserData.ReddatesType"
                    placeholder="请输入红枣种类："
                    ref="ReddatesType"
                    @on-enter="onInputEnter('ReddatesClass')"
                    @on-focus="cleanZero('ReddatesType')"
                  ></Input>
                </FormItem>
              </i-col>
              <i-col span="12">
                <FormItem label="红枣品级：" prop="ReddatesClass">
                  <Input
                    v-model="UserData.ReddatesClass"
                    placeholder="请输入红枣品级："
                    ref="ReddatesClass"
                    @on-enter="onInputEnter('NumberKg')"
                    @on-focus="cleanZero('ReddatesClass')"
                  />
                </FormItem>
              </i-col>
            </Row>
            <Row>
              <i-col span="12">
                <FormItem label="千克果粒数" prop="NumberKg">
                  <label slot="label">千克果粒数:</label>
                  <Input
                    v-model="UserData.NumberKg"
                    ref="NumberKg"
                    @on-enter="onInputEnter('Deviation')"
                    @on-focus="cleanZero('NumberKg')"
                    placeholder="请输入千克果粒数："
                  />
                </FormItem>
              </i-col>
              <i-col span="12">
                <FormItem label="均匀度允差" prop="Deviation">
                  <label slot="label">均匀度允差:</label>
                  <Input
                    v-model="UserData.Deviation"
                    ref="Deviation"
                    @on-enter="onInputEnter('Wet')"
                    @on-focus="cleanZero('Deviation')"
                    placeholder="请输入均匀度允差："
                  />
                </FormItem>
              </i-col>
            </Row>
            <Row>
              <i-col span="12">
                <FormItem label="水分值：" prop="Wet">
                  <label slot="label">水分值:</label>
                  <Input
                    v-model="UserData.Wet"
                    ref="Wet"
                    @on-enter="onInputEnter('PackCode')"
                    @on-focus="cleanZero('Wet')"
                    placeholder="请输入水分值："
                  />
                </FormItem>
              </i-col>
              <i-col span="12">
                <FormItem label="采收日期：" prop="BuyTime">
                  <DatePicker
                    v-model="UserData.BuyTime"
                    @on-change="getDataStartTime"
                    :clearable="true"
                    :editable="false"
                    type="date"
                    placeholder="选择日期"
                  ></DatePicker>
                </FormItem>
              </i-col>
            </Row>
            <Row>
              <i-col span="12">
                <FormItem label="装箱编号：" prop="PackCode">
                  <label slot="label">装箱编号：</label>
                  <Input
                    v-model="UserData.PackCode"
                    ref="PackCode"
                    @on-enter="onInputEnter('PlantSite')"
                    @on-focus="cleanZero('PackCode')"
                    placeholder="请输入装箱编号："
                  ></Input>
                </FormItem>
              </i-col>
              <i-col span="12">
                <FormItem label="出厂日期：" prop="DeliveryTime">
                  <DatePicker
                    v-model="UserData.DeliveryTime"
                    @on-change="getDataEndTime"
                    :clearable="true"
                    :editable="false"
                    type="date"
                    placeholder="选择日期"
                  ></DatePicker>
                </FormItem>
              </i-col>
            </Row>

            <Row>
              <i-col span="12">
                <FormItem label="种植地：" prop="PlantSite">
                  <label slot="label">种植地：</label>
                  <Input
                    v-model="UserData.PlantSite"
                    ref="PlantSite"
                    @on-enter="onInputEnter('ReddatesType')"
                    @on-focus="cleanZero('PlantSite')"
                    placeholder="请输入种植地："
                  ></Input>
                </FormItem>
              </i-col>
              <i-col span="12">
                <FormItem label="选择企业：" prop="company">
                  <label slot="label">选择企业：</label>
                  <Select
                    :label-in-value="true"
                    @on-change="getcompany"
                    v-model="UserData.CompanyId"
                    placeholder="请选择选择企业："
                  >
                    <Option
                      v-for="item in CompanyList"
                      :value="item.Id"
                      :key="item.Id"
                      :lable="item.CompanyName"
                      >{{ item.CompanyName }}</Option
                    >
                  </Select>
                </FormItem>
              </i-col>
            </Row>
          </div>
        </Form>
      </Row>

      <div slot="footer">
        <Button
          type="primary"
          :loading="loading"
          @click="handleSubmit('UserData')"
          >提交</Button
        >
        <Button :loading="loading" @click="cancel('UserData')">取消</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  createRedDates,
  getAllRedDates,
  updateRedDates,
  getRedDates,
  searchRedDates,
  getOneRedDates,
  timestampToDate,
  getCompanyList,
} from "@/api/data";
import { formatDate } from "../../components/date.js";
export default {
  name: "UserAdd",
  data() {
    return {
      loading: false,
      mode: this.add,

      // 表单验证规则
      ruleInUser: {
        ReddatesType: [
          { required: true, message: "请输入红枣种类：", trigger: "blur" },
        ],
        ReddatesClass: [
          { required: true, message: "请输入红枣品级：", trigger: "blur" },
        ],

        //  NumberKg: [
        //   { required: true, message: "请输入千克果粒数：", trigger: "blur" },
        // ],

        //  BuyTime: [
        //   { required: true, message: "请选择采收日期：", trigger: "blur" },
        // ],
        //  DeliveryTime: [
        //   { required: true, message: "请选择出厂日期：", trigger: "blur" },
        // ],
        //  DeliveryTime: [
        //   { required: true, message: "请选择出厂日期：", trigger: "blur" },
        // ],
        //  Deviation: [
        //   { required: true, message: "请输入均匀度允差：", trigger: "blur" },
        // ],
        PackCode: [
          { required: true, message: "请输入装箱编号：", trigger: "blur" },
        ],
        PlantSite: [
          {
            required: true,
            message: "请输入种植地",
            trigger: "change",
          },
        ],
      },
      CompanyList: [],
      listdata: [],
    };
  },
  props: {
    add: {
      type: Boolean,
      required: true,
    },
    UserData: {
      type: Object,
      required: true,
    },
  },
  methods: {
    // 输入框回车跳转下一个输入框
    onInputEnter(next) {
      let node = this.$refs[next];
      node.focus();
    },
    cleanZero(input) {
      console.log(this.UserData[input]);
      if (this.UserData[input] == 0) {
        this.UserData[input] = null;
      }
    },
    testChange(val) {
      this.$emit("testChange", val);
    },
    getDataStartTime(starttime) {
      this.UserData.BuyTime = starttime; // 给采收时间赋值
    },
    getDataEndTime(endtime) {
      this.UserData.DeliveryTime = endtime; // 给出厂时间赋值
    },
    // getcompany(company) {
    //   console.log(company, 111111);
    //   this.UserData.CompanyName = company.label; // 给公司赋值
    // },
    getcompany: function (val) {
      let that = this;
      that.UserData.CompanyName = val.label; //获取label
      that.UserData.CompanyId = val.value; //获取value
    },

    cleanZero(input) {
      console.log(this.UserData[input]);
      if (this.UserData[input] == 0) {
        this.UserData[input] = null;
      }
    },
    cancel() {
      this.loading = false;
      let data = {
        mode: false,
      };
      this.$refs["UserData"].resetFields();
      this.$emit("cancelCallBack", data);
    },
    // 提交编辑后的userInfo
    handleSubmit(name) {
      console.log("222", this.UserData);
      this.$refs[name].validate((valid) => {
        console.log("提交验证：", valid);
        if (valid) {
          this.loading = true;
          this.submit();
        } else {
          this.$Message.error("请填写相关信息!");
        }
      });
    },
    submit() {
      console.log("查找公司名称", this.UserData);
      const data = {
        ReddatesType: this.UserData.ReddatesType,
        ReddatesClass: this.UserData.ReddatesClass,
        NumberKg: Number(this.UserData.NumberKg),
        Deviation: Number(this.UserData.Deviation),
        DeliveryTime: this.UserData.DeliveryTime,
        BuyTime: this.UserData.BuyTime,
        PackCode: this.UserData.PackCode,
        PlantSite: this.UserData.PlantSite,
        Wet: Number(this.UserData.Wet),
        // 企业字段
        CompanyName: this.UserData.CompanyName,
        CompanyId: this.UserData.CompanyId,
      };
      createRedDates(data)
        .then((res) => {
          if (res !== null) {
            this.$Message.success("提交成功");
            this.loading = false;
            let data = {
              mode: false,
            };
            this.$emit("success", data);
          } else if (response.data.flag == 0) {
            this.$Message.success("提交失败");
          } else if (response.data.flag == 2) {
            this.$Message.success("状态过期");
          }
        })
        .catch((error) => {
          this.$Message.error("请核对之后重新提交");
          this.loading = false;
        });
    },
    // 输入框回车
    onInputEnter(next) {
      let node = this.$refs[next];
      node.focus();
    },
    // 打印
    doPrintTest(Id) {
      let args = {
        baseurl: "/",
        report_method: "get",
        data_method: "get",
        report: "/xjmh_v2/grf/suyuan.grf?v=" + new Date().getTime(),
        data: "/v1/farmer_order/printOrder/" + Id,
      };
      webapp_ws_ajax_run(args);
    },
  },
  mounted() {
    const cmpdata = {
      fields: "Id,CompanyName",
      offset: "0",
      limit: "-1",
    };
    // const dptdata = {
    //   fields: "Id,DeptName",
    //   offset: "0",
    //   limit: "-1",
    // };
    // 获得包含公司Id和companyname字段的全部列表
    getCompanyList(cmpdata).then((res) => {
      this.CompanyList = res.List;
    });
  },
  watch: {
    add(val) {
      this.mode = val;
    },
  },
};
</script>
<style>
.dept .ivu-select-placeholder {
  color: #515a6e !important;
}
</style>
